<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的考试</title>
		<link rel="stylesheet" href="js/layui/css/layui.css" />
		<script src="js/jquery.min.js"></script>
		<script src="js/layui/layui.js"></script>
		<script src="js/global.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
			<legend>我的考试</legend>
		</fieldset>
		
        <table id="myExamTab" class="layui-table" lay-filter="test"></table>
		
		<!--行内工具栏-->
		<script type="text/html" id="lineToolbar">
			
			<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="startExam">
				<i class="layui-icon">&#xe642;</i>开始考试
			</a>
		</script>
		
		<script type="text/html" id="examStatusBar">
			{{# if(d.examStatus == 0){ }}
				<div style="color: green;">未开始</div>
			{{# }else if(d.examStatus == 1){ }}
				<div style="color: red;">进行中</div>
			{{# }else if(d.examStatus == 2){ }}
				<div style="color: gray;">已结束</div>
			{{# } }}
		</script>
	</body>
	<script>
		layui.use(['table','layer','form'],function(){
			var table=layui.table,
			layer=layui.layer,
			form=layui.form,
			$=layui.$;
			
			var userId = globalData.getCurUserId();
			if(userId == null || userId == undefined){
				layer.msg("请先登录！",{icon:2,time:2000});
				return ;
			}
			//表格渲染
			table.render({
				elem:'#myExamTab',
				height:400,
				url:globalData.examinationServer+"/myExam/getExamsByUserId",
				where:{
					userId : userId
				},
				method:"get",
				//headers: {token: globalData.getCurToken()},//设置请求头
				title:'我的考试列表',
				page:true,
				id:'myExamList',
				cols:[
					[
					{
						field:'examName',
						width:300,
						title:'考试名称',
						align:'center'
					},{
						field:'examStartTime',
						width:300,
						title:'开始时间',
						align:'center'
					},{
						field:'examStatus',
						width:150,
						title:'状态',
						align:'center',
						templet:'#examStatusBar'
					},{
						title:'操作',
						width:350,
						align:'center',
						toolbar:'#lineToolbar'
					}
					]
				],
				text: {
				    none: '暂无相关数据', //默认：无数据。
				  }
			});
			
			
			
			//行内工具监听事件
			table.on('tool(test)',function(obj){
				var data=obj.data;
				switch(obj.event){
					
					case 'startExam':
						if(data.examStatus == 0){
							layer.msg("考试还未开始！",{icon:7,time:3000});
							return;
						}else if(data.examStatus == 1){
							//进入考试
							$.ajax({
								type : "get",
								url : globalData.examinationServer+"/myExam/startExam",
								async : false, //必须使用同步请求
								data:{
									'examId' : data.examId,
									'userId' : globalData.getCurUserId()
								},//需要传递到服务端的数据
								dataType:'json',//服务端响应数据类型
								xhrFields: {
									withCredentials: true
								},
								// beforeSend: function(request) {
								// 	request.setRequestHeader("token", globalData.getCurToken());
								// },
								success : function(res) {
									if(res.code == 0){
										if(res.data.examId != null){
											globalData.setExamId(res.data.examId);
											//进入考试页面
											top.location = "exam.html";
										}else{
											layer.msg("考试数据获取异常！",{icon:2,time:2000});
										}
										
									}else{
										layer.msg(res.msg,{icon:2,time:2000});
									}
							}
							});
						}else{
							layer.msg("考试已结束！",{icon:4,time:3000});
							return;
						}
						
					break;
				}
			});
		});
	</script>
</html>
